<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>清洗工位</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link href="css/bootstrap.min.css?v=3.3.7" rel="stylesheet" />
  <link href="css/font-awesome.min.css?v=4.7.0" rel="stylesheet" />
  <!-- bootstrap-table 表格插件样式 -->
  <link href="ajax/libs/bootstrap-table/bootstrap-table.min.css?v=1.22.6" rel="stylesheet" />
  <link href="css/animate.min.css?v=20210831" rel="stylesheet" />
  <link href="css/style.min.css?v=20210831" rel="stylesheet" />
  <link href="ruoyi/css/ry-ui.css?v=4.8.0" rel="stylesheet" />

  <script src="js/jquery.min.js?v=3.6.3"></script>
  <script src="js/bootstrap.min.js?v=3.3.7"></script>
  <!-- bootstrap-table 表格插件 -->
  <script src="ajax/libs/bootstrap-table/bootstrap-table.min.js?v=1.22.6"></script>
  <script src="ajax/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js?v=1.22.6"></script>
  <script src="ajax/libs/bootstrap-table/extensions/mobile/bootstrap-table-mobile.js?v=1.22.6"></script>
  <!-- jquery-validate 表单验证插件 -->
  <script src="ajax/libs/validate/jquery.validate.min.js?v=1.21.0"></script>
  <script src="ajax/libs/validate/jquery.validate.extend.js?v=1.21.0"></script>
  <script src="ajax/libs/validate/messages_zh.js?v=1.21.0"></script>
  <!-- bootstrap-table 表格树插件 -->
  <script src="ajax/libs/bootstrap-table/extensions/tree/bootstrap-table-tree.min.js?v=1.22.6"></script>
  <!-- 遮罩层 -->
  <script src="ajax/libs/blockUI/jquery.blockUI.js?v=2.70.0"></script>
  <script src="ajax/libs/iCheck/icheck.min.js?v=1.0.3"></script>
  <script src="ajax/libs/layer/layer.min.js?v=3.7.0"></script>
  <script src="ajax/libs/layui/layui.min.js?v=2.8.18"></script>
  <script src="ruoyi/js/common.js?v=4.8.0"></script>
  <script src="ruoyi/js/ry-ui.js?v=4.8.0"></script>
</head>

<body>
  <div id="cleaning">
    <div class="main-con">
      <div class="top">
        <div class="monitor-wrapper">
          <div class="monitor-header">
            <img src="img/loading/cleaning-left-top.png" class="load-icon" />
            <div class="structure-con">
              <img src="img/loading/cleaning-right-top.png" class="structure" />
              <div class="bpq-warning warning-box bpq-1">
                <div class="warning-content">
                  <div class="warning-title">报警</div>
                  <div class="warning-text">
                    变频器-1号
                  </div>
                </div>
                <div class="warning-mark">
                  <img src="img/loading/alert.png" alt="" srcset="">
                </div>
              </div>
              <div class="bpq-warning warning-box bpq-2">
                <div class="warning-content">
                  <div class="warning-title">报警</div>
                  <div class="warning-text">
                    变频器-2号
                  </div>
                </div>
                <div class="warning-mark">
                  <img src="img/loading/alert.png" alt="" srcset="">
                </div>
              </div>
              <div class="bpq-warning warning-box bpq-3">
                <div class="warning-content">
                  <div class="warning-title">报警</div>
                  <div class="warning-text">
                    变频器-3号
                  </div>
                </div>
                <div class="warning-mark">
                  <img src="img/loading/alert.png" alt="" srcset="">
                </div>
              </div>
              <div class="bpq-warning warning-box bpq-4">
                <div class="warning-content">
                  <div class="warning-title">报警</div>
                  <div class="warning-text">
                    变频器-4号
                  </div>
                </div>
                <div class="warning-mark">
                  <img src="img/loading/alert.png" alt="" srcset="">
                </div>
              </div>
              <div class="bpq-warning warning-box bpq-5">
                <div class="warning-content">
                  <div class="warning-title">报警</div>
                  <div class="warning-text">
                    变频器-5号
                  </div>
                </div>
                <div class="warning-mark">
                  <img src="img/loading/alert.png" alt="" srcset="">
                </div>
              </div>
              <div class="bpq-warning warning-box bpq-6">
                <div class="warning-content">
                  <div class="warning-title">报警</div>
                  <div class="warning-text">
                    变频器-6号
                  </div>
                </div>
                <div class="warning-mark">
                  <img src="img/loading/alert.png" alt="" srcset="">
                </div>
              </div>
              <div class="bpq-warning warning-box bpq-7">
                <div class="warning-content">
                  <div class="warning-title">报警</div>
                  <div class="warning-text">
                    变频器-7号
                  </div>
                </div>
                <div class="warning-mark">
                  <img src="img/loading/alert.png" alt="" srcset="">
                </div>
              </div>
              <div class="bpq-warning warning-box bpq-8">
                <div class="warning-content">
                  <div class="warning-title">报警</div>
                  <div class="warning-text">
                    变频器-8号
                  </div>
                </div>
                <div class="warning-mark">
                  <img src="img/loading/alert.png" alt="" srcset="">
                </div>
              </div>
              <div class="bpq-warning warning-box bpq-9">
                <div class="warning-content">
                  <div class="warning-title">报警</div>
                  <div class="warning-text">
                    变频器-9号
                  </div>
                </div>
                <div class="warning-mark">
                  <img src="img/loading/alert.png" alt="" srcset="">
                </div>
              </div>
              <div class="bpq-warning warning-box bpq-10">
                <div class="warning-content">
                  <div class="warning-title">报警</div>
                  <div class="warning-text">
                    变频器-10号
                  </div>
                </div>
                <div class="warning-mark">
                  <img src="img/loading/alert.png" alt="" srcset="">
                </div>
              </div>
              <div class="bpq-warning warning-box bpq-11">
                <div class="warning-content">
                  <div class="warning-title">报警</div>
                  <div class="warning-text">
                    变频器-11号
                  </div>
                </div>
                <div class="warning-mark">
                  <img src="img/loading/alert.png" alt="" srcset="">
                </div>
              </div>
              <div class="bpq-warning warning-box bpq-12">
                <div class="warning-content">
                  <div class="warning-title">报警</div>
                  <div class="warning-text">
                    变频器-12号
                  </div>
                </div>
                <div class="warning-mark">
                  <img src="img/loading/alert.png" alt="" srcset="">
                </div>
              </div>
              <div class="bpq-warning warning-box bpq-13">
                <div class="warning-content">
                  <div class="warning-title">报警</div>
                  <div class="warning-text">
                    变频器-13号
                  </div>
                </div>
                <div class="warning-mark">
                  <img src="img/loading/alert.png" alt="" srcset="">
                </div>
              </div>
              <div class="bpq-warning warning-box bpq-14">
                <div class="warning-content">
                  <div class="warning-title">报警</div>
                  <div class="warning-text">
                    变频器-14号
                  </div>
                </div>
                <div class="warning-mark">
                  <img src="img/loading/alert.png" alt="" srcset="">
                </div>
              </div>
              <div class="sfdj-warning warning-box sfdj-1">
                <div class="warning-content">
                  <div class="warning-title">报警</div>
                  <div class="warning-text">
                    伺服电机-1号
                  </div>
                </div>
                <div class="warning-mark">
                  <img src="img/loading/alert.png" alt="" srcset="">
                </div>
              </div>
              <div class="sfdj-warning warning-box sfdj-2">
                <div class="warning-content">
                  <div class="warning-title">报警</div>
                  <div class="warning-text">
                    伺服电机-2号
                  </div>
                </div>
                <div class="warning-mark">
                  <img src="img/loading/alert.png" alt="" srcset="">
                </div>
              </div>
              <div class="sfdj-warning warning-box sfdj-3">
                <div class="warning-content">
                  <div class="warning-title">报警</div>
                  <div class="warning-text">
                    伺服电机-3号
                  </div>
                </div>
                <div class="warning-mark">
                  <img src="img/loading/alert.png" alt="" srcset="">
                </div>
              </div>
              <div class="sfdj-warning warning-box sfdj-4">
                <div class="warning-content">
                  <div class="warning-title">报警</div>
                  <div class="warning-text">
                    伺服电机-4号
                  </div>
                </div>
                <div class="warning-mark">
                  <img src="img/loading/alert.png" alt="" srcset="">
                </div>
              </div>
              <div class="sfdj-warning warning-box sfdj-5">
                <div class="warning-content">
                  <div class="warning-title">报警</div>
                  <div class="warning-text">
                    伺服电机-5号
                  </div>
                </div>
                <div class="warning-mark">
                  <img src="img/loading/alert.png" alt="" srcset="">
                </div>
              </div>
              <div class="sfdj-warning warning-box sfdj-6">
                <div class="warning-content">
                  <div class="warning-title">报警</div>
                  <div class="warning-text">
                    伺服电机-6号
                  </div>
                </div>
                <div class="warning-mark">
                  <img src="img/loading/alert.png" alt="" srcset="">
                </div>
              </div>
            </div>
            <div class="fddm-warning warning-box">
              <div class="fddm-left"></div>
              <div class="fddm-right"></div>
              <div class="warning-content">
                <div class="warning-title">报警</div>
                <div class="warning-text">
                  浮动打磨异常报警
                </div>
              </div>
              <div class="warning-mark">
                <img src="img/loading/alert.png" alt="" srcset="">
              </div>
            </div>
            <!-- <div class="wl-warning warning-box">
              <div class="warning-content">
                <div class="warning-title">无料</div>
                <div class="warning-text">
                  物流线数量：<span></span> 个
                </div>
              </div>
               <div class="warning-mark">
                  <img src="img/loading/alert.png" alt="" srcset="">
                </div>
            </div> -->
            <div class="pm-warning warning-box">
              <div class="warning-content">
                <div class="warning-title">报警</div>
                <div class="warning-text">
                  喷墨划线异常报警
                </div>
              </div>
              <div class="warning-mark">
                <img src="img/loading/alert.png" alt="" srcset="">
              </div>
            </div>
            <!-- 报警信息 -->
            <div class="tip-wrapper">
              <img src="img/loading/tip.png" class="tip" id="tip" />
              <div class="tip-wrapper-list" id="tip-wrapper-list">
                <img src="img/loading/tip-header.png" class="tip-header" style="width: 100%; height: 80px" />
                <div id="tip-wrapper-list-content" class="tip-wrapper-list-content">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="left">
          <div class="title-con">
            <div>喷墨划线运行状态</div>
          </div>
          <div class="content-container">
            <div class="line"></div>
            <div class="left-top-bar bar" style="height: 21px"></div>
            <div class="right-top-bar bar" style="height: 21px"></div>
            <div class="left-bottom-bar bar"></div>
            <div class="right-bottom-bar bar"></div>
            <div class="content">
              <div class="status">
                <div class="common-item">
                  <div class="title">激光器状态</div>
                  <span class="status laserStatus"></span>
                </div>
                <div class="common-item">
                  <div class="title">激光水冷器温度状态</div>
                  <span class="status laserCoolerTemperature"></span>
                </div>
                <div class="common-item">
                  <div class="title">喷墨划线工作状态</div>
                  <span class="status inkjetMarkingStatus"></span>
                </div>
              </div>
              <div class="middle-content">
                <div class="left-item">
                  <div class="common-item">
                    <div class="title">激光清洗板料计数</div>
                  </div>
                  <div class="count-circle">
                    <img src="img/loading/trans-circle.png" alt="" srcset="">
                    <div class="progress-ring" style="--progress: 75;">
                      <div class="progress-ring__content laserCleaningCount"></div>
                    </div>
                  </div>
                </div>
                <div class="right-item">
                  <div class="common-item">
                    <div class="title">激光烟雾吸尘器工作状态</div>
                    <span class="status laserSmokeExtractorStatus"></span>
                  </div>
                  <div class="common-item">
                    <div class="title">板料视觉边轮廓识别装置工作状态</div>
                    <span class="status boardVisionRecognitionStatus"></span>
                  </div>
                  <div class="common-item">
                    <div class="title">板料视觉边轮廓识别装置是否修正</div>
                    <span class="status boardVisionCorrection"></span>
                  </div>
                </div>
              </div>
              <div class="bottom-content">
                <div class="left-content">
                  <div class="bar-item">
                    <div class="left">
                      <div class="left-bar" style="background: #24eacd"></div>
                      <div class="title" style="color: #24eacd">
                        激光清洗头位置（X轴位置）
                      </div>
                    </div>
                    <div style="color: #24eacd" class=""><span class="laserCleaningHeadX"></span>m</div>
                  </div>
                  <div class="bar-item">
                    <div class="left">
                      <div class="left-bar" style="background: #fffa92"></div>
                      <div class="title" style="color: #fffa92">
                        激光清洗头位置（Y轴位置）
                      </div>
                    </div>
                    <div style="color: #fffa92" class=""><span class="laserCleaningHeadY"></span>m</div>
                  </div>
                  <div class="bar-item">
                    <div class="left">
                      <div class="left-bar" style="background: #13e7ff"></div>
                      <div class="title" style="color: #13e7ff">
                        激光清洗头位置（Z轴位置）
                      </div>
                    </div>
                    <div style="color: #13e7ff" class=""><span class="laserCleaningHeadZ"></span>m</div>
                  </div>
                  <div class="bar-item">
                    <div class="left">
                      <div class="left-bar" style="background: #00b5ff"></div>
                      <div class="title" style="color: #00b5ff">
                        激光清洗头位置（C轴位置）
                      </div>
                    </div>
                    <div style="color: #00b5ff" class=""><span class="laserCleaningHeadC"></span>m</div>
                  </div>
                  <div class="bar-item">
                    <div class="left">
                      <div class="left-bar" style="background: #35ccff"></div>
                      <div class="title" style="color: #35ccff">
                        激光清洗与划线速度 (进给速度)
                      </div>
                    </div>
                    <div style="color: #35ccff" class=""><span class="laserCleaningFeedSpeed"></span>m/s</div>
                  </div>
                </div>
                <div class="right-content">
                  <div class="common-item">
                    <div class="title">激光清洗设定宽度</div>
                    <div class="status "><span class="laserCleaningWidth"></span>m</div>
                  </div>
                  <div class="common-item">
                    <div class="title">墨水（墨盒）寿命</div>
                    <div class="status "><span class="inkCartridgeLifetime"></span>Y</div>
                  </div>
                  <div class="common-item">
                    <div class="title">喷墨划线设定划线宽度</div>
                    <div class="status "><span class="inkjetMarkingWidth"></span>m</div>
                  </div>
                  <div class="common-item">
                    <div class="title">激光器功率</div>
                    <div class="status "><span class="laserPower"></span>w</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="line"></div>
          </div>
        </div>
        <div class="right">
          <div class="title-con">
            <div>浮动打磨运行状态</div>
          </div>
          <div class="content-container">
            <div class="line" style="height: 6px"></div>
            <div class="left-top-bar bar"></div>
            <div class="right-top-bar bar"></div>
            <div class="left-bottom-bar bar"></div>
            <div class="right-bottom-bar bar"></div>
            <div class="content">
              <div class="content">
                <div class="left">
                  <div class="run-status">
                    <img src="img/loading/running-bg.png" alt="" srcset="" />
                    <div class="inner">
                      <img src="img/loading/normal-bg.png" alt="" srcset="" />
                      <span class="wetDustCollectorStatus"></span>
                    </div>
                  </div>
                  <div class="work-status">湿式除尘器工作状态</div>
                  <div class="common-item">
                    <div class="title">打磨片当前使用寿命</div>
                    <div class="status" style="color: #f16060"><span class="grindingDiscCurrentLifetime"></span> 天
                    </div>
                  </div>
                  <div class="common-item">
                    <div class="title">打磨片设定寿命</div>
                    <div class="status "><span class="grindingDiscSetLifetime"></span> 天</div>
                  </div>
                </div>
                <div class="center">
                  <div class="common-item">
                    <div class="title">打磨头位置</div>
                  </div>
                  <div class="position">
                    <div class="common-item">
                      <div class="title">y位置：</div>
                      <div class="status"><span class="grindingHeadY"></span> m</div>
                    </div>
                    <div class="common-item">
                      <div class="title">z位置：</div>
                      <div class="status"><span class="grindingHeadZ"></span> m</div>
                    </div>
                    <div class="common-item">
                      <div class="title">c位置：</div>
                      <div class="status"><span class="grindingHeadC"></span> m</div>
                    </div>
                  </div>
                </div>
                <div class="right">
                  <div class="common-item">
                    <div class="title">打磨主轴转速</div>
                  </div>
                  <div class="rotate-speed">
                    <span class="grindingSpindleSpeed"></span><sub>r/s</sub>
                  </div>
                  <div class="common-item">
                    <div class="title">打磨片新件数量</div>
                    <div class="status"><span class="grindingDiscNewCount"></span> 件</div>
                  </div>
                  <div class="common-item">
                    <div class="title">打磨片旧件数量</div>
                    <div class="status"><span class="grindingDiscOldCount"></span> 件</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="line" style="height: 6px"></div>
          </div>
          <div class="title-con">
            <div>物流线运行状态</div>
          </div>
          <div class="running-status">
            <div class="flex row" id="materialFlows">
            </div>
            <div class="flex row" id="transducer">
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
  </div>
</body>

</html>
<script>
  var refleshAlarm = 1500;
  var refleshStatus = 1500;
  $('#cleaning #tip').click(function (e) {
    e.stopPropagation(); //阻止事件冒泡
    $('#cleaning #tip-wrapper-list').css('display', 'block');
  });
  $('#cleaning').click(function (e) {
    if (e.target.classList.contains('tip-wrapper-list-item') || e.target.classList.contains('alarms') || e.target
      .classList.contains('tip-wrapper-list-content') || e.target.classList.contains('tip-header') || e.target
        .classList.contains('tip') || e.target.classList.contains('tip-wrapper-list')) return
    $('#cleaning #tip-wrapper-list').css('display', 'none');
  });
  async function getCleaningStatusInfo() {
    const data = await new Promise((resolve, reject) => {
      let resStr =
        '{"cleaningStatus":{"laserCleaningHeadX":153.9684,"laserCleaningHeadY":153.9684,"laserCleaningHeadZ":153.9684,"laserCleaningHeadC":153.9684,"laserCleaningFeedSpeed":153.9684,"laserCleaningWidth":153.9684,"inkjetMarkingWidth":153.9684,"inkCartridgeLifetime":76,"laserPower":153.9684,"laserStatus":76,"laserCoolerTemperature":76,"laserSmokeExtractorStatus":76,"inkjetMarkingStatus":76,"boardVisionRecognitionStatus":76,"boardVisionCorrection":76,"laserCleaningCount":76,"grindingSpindleSpeed":153.9684,"grindingHeadY":153.9684,"grindingHeadZ":153.9684,"grindingHeadC":153.9684,"grindingDiscCurrentLifetime":153,"grindingDiscSetLifetime":76,"grindingDiscNewCount":76,"grindingDiscOldCount":76,"wetDustCollectorStatus":76},"updateTime":1742808005986}';
      res = JSON.parse(resStr);
      console.log(res, 'res');
      $('#cleaning .laserCleaningHeadX').text(res.cleaningStatus.laserCleaningHeadX);
      $('#cleaning .laserCleaningHeadY').text(res.cleaningStatus.laserCleaningHeadY);
      $('#cleaning .laserCleaningHeadZ').text(res.cleaningStatus.laserCleaningHeadZ);
      $('#cleaning .laserCleaningHeadC').text(res.cleaningStatus.laserCleaningHeadC);
      $('#cleaning .laserCleaningHeadX').text(res.cleaningStatus.laserCleaningHeadX);
      $('#cleaning .laserCleaningFeedSpeed').text(res.cleaningStatus.laserCleaningFeedSpeed);
      $('#cleaning .laserCleaningWidth').text(res.cleaningStatus.laserCleaningWidth);
      $('#cleaning .laserCleaningFeedSpeed').text(res.cleaningStatus.laserCleaningFeedSpeed);
      $('#cleaning .inkCartridgeLifetime').text(res.cleaningStatus.inkCartridgeLifetime);
      $('#cleaning .inkjetMarkingWidth').text(res.cleaningStatus.inkjetMarkingWidth);
      $('#cleaning .laserPower').text(res.cleaningStatus.laserPower);
      $('#cleaning .laserStatus').text(res.cleaningStatus.laserStatus === 0 ? '正常' : res.cleaningStatus.laserStatus === 1 ?
        '异常' : '');
      $('#cleaning .laserCoolerTemperature').text(res.cleaningStatus.laserCoolerTemperature === 0 ? '正常' : res
        .cleaningStatus.laserCoolerTemperature === 1 ? '异常' : '');
      $('#cleaning .inkjetMarkingStatus').text(res.cleaningStatus.inkjetMarkingStatus === 0 ? '正常' : res.cleaningStatus
        .inkjetMarkingStatus === 1 ? '异常' : '');
      $('#cleaning .laserSmokeExtractorStatus').text(res.cleaningStatus.laserSmokeExtractorStatus === 0 ? '正常' : res
        .cleaningStatus.laserSmokeExtractorStatus === 1 ? '异常' : '');
      $('#cleaning .boardVisionRecognitionStatus').text(res.cleaningStatus.boardVisionRecognitionStatus === 0 ? '正常' : res
        .cleaningStatus.boardVisionRecognitionStatus === 1 ? '异常' : '');
      $('#cleaning .boardVisionCorrection').text(res.cleaningStatus.boardVisionCorrection === 0 ? '正常' : res.cleaningStatus
        .boardVisionCorrection === 1 ? '异常' : '');
      $('#cleaning .wetDustCollectorStatus').text(res.cleaningStatus.wetDustCollectorStatus === 0 ? '正常' : res
        .cleaningStatus.wetDustCollectorStatus === 1 ? '异常' : '');
      $('#cleaning .laserCleaningCount').text(res.cleaningStatus.laserCleaningCount);
      $('#cleaning .grindingDiscCurrentLifetime').text(res.cleaningStatus.grindingDiscCurrentLifetime);
      $('#cleaning .grindingDiscSetLifetime').text(res.cleaningStatus.grindingDiscSetLifetime);
      $('#cleaning .grindingHeadY').text(res.cleaningStatus.grindingHeadY);
      $('#cleaning .grindingHeadZ').text(res.cleaningStatus.grindingHeadZ);
      $('#cleaning .grindingHeadC').text(res.cleaningStatus.grindingHeadC);
      $('#cleaning .grindingSpindleSpeed').text(res.cleaningStatus.grindingSpindleSpeed);
      $('#cleaning .grindingDiscNewCount').text(res.cleaningStatus.grindingDiscNewCount);
      $('#cleaning .grindingDiscOldCount').text(res.cleaningStatus.grindingDiscOldCount);
      $('#cleaning #currentDateTime').text(formatDateTime(res.updateTime));
      $('#cleaning .progress-ring').css('--progress', 50)
      resolve(res)
    })
    return data
  }

  async function getLoadingAlarmInfo() {
    const data = await new Promise((resolve, reject) => {
      //字符串转json
      resStr =
        '{"loadingAlarms":[{"component":0,"alarmType":0,"deviceSn":0},{"component":0,"alarmType":1,"deviceSn":0},{"component":0,"alarmType":2,"deviceSn":0},{"component":1,"alarmType":3,"deviceSn":0},{"component":1,"alarmType":4,"deviceSn":0}],"updateTime":1742808012066}'
      res = JSON.parse(resStr);
      resolve(res)
    })
    return data
  }
  async function getTransportAlarmsInfo() {
    const data = await new Promise((resolve, reject) => {
      //字符串转json
      resStr =
        '{"updateTime":1742810523559,"transportAlarms":[{"component":10,"alarmType":0,"deviceSn":1},{"component":10,"alarmType":0,"deviceSn":2},{"component":10,"alarmType":0,"deviceSn":3},{"component":10,"alarmType":0,"deviceSn":4},{"component":10,"alarmType":0,"deviceSn":5},{"component":10,"alarmType":0,"deviceSn":6},{"component":10,"alarmType":0,"deviceSn":7},{"component":10,"alarmType":0,"deviceSn":8},{"component":10,"alarmType":0,"deviceSn":9},{"component":10,"alarmType":0,"deviceSn":10},{"component":10,"alarmType":0,"deviceSn":11},{"component":10,"alarmType":0,"deviceSn":12},{"component":10,"alarmType":0,"deviceSn":13},{"component":10,"alarmType":0,"deviceSn":14},{"component":10,"alarmType":1,"deviceSn":1},{"component":10,"alarmType":1,"deviceSn":2},{"component":10,"alarmType":1,"deviceSn":3},{"component":10,"alarmType":1,"deviceSn":4},{"component":10,"alarmType":1,"deviceSn":5},{"component":10,"alarmType":1,"deviceSn":6},{"component":20,"alarmType":0,"deviceSn":1},{"component":20,"alarmType":0,"deviceSn":2},{"component":20,"alarmType":0,"deviceSn":3},{"component":20,"alarmType":0,"deviceSn":4},{"component":20,"alarmType":0,"deviceSn":5},{"component":20,"alarmType":0,"deviceSn":6},{"component":20,"alarmType":0,"deviceSn":7},{"component":20,"alarmType":0,"deviceSn":8},{"component":20,"alarmType":0,"deviceSn":9},{"component":20,"alarmType":0,"deviceSn":10},{"component":20,"alarmType":0,"deviceSn":11},{"component":20,"alarmType":0,"deviceSn":12},{"component":20,"alarmType":0,"deviceSn":13},{"component":20,"alarmType":0,"deviceSn":14},{"component":20,"alarmType":0,"deviceSn":15},{"component":20,"alarmType":0,"deviceSn":16},{"component":20,"alarmType":0,"deviceSn":17},{"component":20,"alarmType":0,"deviceSn":18},{"component":20,"alarmType":0,"deviceSn":19},{"component":20,"alarmType":0,"deviceSn":20},{"component":20,"alarmType":0,"deviceSn":21},{"component":20,"alarmType":0,"deviceSn":22},{"component":20,"alarmType":0,"deviceSn":23},{"component":20,"alarmType":0,"deviceSn":24},{"component":20,"alarmType":0,"deviceSn":25},{"component":20,"alarmType":0,"deviceSn":26},{"component":20,"alarmType":0,"deviceSn":27},{"component":20,"alarmType":0,"deviceSn":28},{"component":20,"alarmType":0,"deviceSn":29},{"component":20,"alarmType":0,"deviceSn":30},{"component":20,"alarmType":0,"deviceSn":31},{"component":20,"alarmType":0,"deviceSn":32},{"component":20,"alarmType":0,"deviceSn":33},{"component":20,"alarmType":0,"deviceSn":34},{"component":20,"alarmType":0,"deviceSn":35},{"component":20,"alarmType":1,"deviceSn":1},{"component":20,"alarmType":1,"deviceSn":2},{"component":20,"alarmType":1,"deviceSn":3},{"component":20,"alarmType":1,"deviceSn":4},{"component":20,"alarmType":1,"deviceSn":5},{"component":20,"alarmType":1,"deviceSn":6},{"component":30,"alarmType":0,"deviceSn":1},{"component":30,"alarmType":0,"deviceSn":2},{"component":30,"alarmType":0,"deviceSn":3},{"component":30,"alarmType":0,"deviceSn":4},{"component":30,"alarmType":0,"deviceSn":5},{"component":30,"alarmType":0,"deviceSn":6},{"component":30,"alarmType":0,"deviceSn":7},{"component":30,"alarmType":0,"deviceSn":8},{"component":30,"alarmType":0,"deviceSn":9},{"component":30,"alarmType":0,"deviceSn":10},{"component":30,"alarmType":0,"deviceSn":11},{"component":30,"alarmType":0,"deviceSn":12},{"component":30,"alarmType":0,"deviceSn":13},{"component":30,"alarmType":0,"deviceSn":14},{"component":30,"alarmType":0,"deviceSn":15},{"component":30,"alarmType":0,"deviceSn":16},{"component":30,"alarmType":0,"deviceSn":17},{"component":30,"alarmType":0,"deviceSn":18},{"component":30,"alarmType":0,"deviceSn":19},{"component":30,"alarmType":0,"deviceSn":20},{"component":30,"alarmType":0,"deviceSn":21},{"component":30,"alarmType":0,"deviceSn":22},{"component":30,"alarmType":0,"deviceSn":23},{"component":30,"alarmType":0,"deviceSn":24},{"component":30,"alarmType":0,"deviceSn":25},{"component":30,"alarmType":0,"deviceSn":26},{"component":30,"alarmType":0,"deviceSn":27},{"component":30,"alarmType":0,"deviceSn":28},{"component":30,"alarmType":0,"deviceSn":29},{"component":30,"alarmType":0,"deviceSn":30},{"component":30,"alarmType":0,"deviceSn":31},{"component":30,"alarmType":0,"deviceSn":32},{"component":30,"alarmType":0,"deviceSn":33},{"component":30,"alarmType":0,"deviceSn":34},{"component":30,"alarmType":0,"deviceSn":35},{"component":30,"alarmType":0,"deviceSn":36},{"component":30,"alarmType":0,"deviceSn":37},{"component":30,"alarmType":0,"deviceSn":38},{"component":30,"alarmType":0,"deviceSn":39},{"component":30,"alarmType":0,"deviceSn":40},{"component":30,"alarmType":0,"deviceSn":41},{"component":30,"alarmType":0,"deviceSn":42},{"component":30,"alarmType":0,"deviceSn":43},{"component":30,"alarmType":0,"deviceSn":44},{"component":30,"alarmType":0,"deviceSn":45},{"component":30,"alarmType":0,"deviceSn":46},{"component":30,"alarmType":0,"deviceSn":47},{"component":30,"alarmType":0,"deviceSn":48},{"component":30,"alarmType":0,"deviceSn":49},{"component":30,"alarmType":0,"deviceSn":50},{"component":30,"alarmType":0,"deviceSn":51},{"component":30,"alarmType":0,"deviceSn":52}]}'
      res = JSON.parse(resStr);
      (res.transportAlarms || []).forEach(item => {

      })
      resolve(res)
    })
    return data
  }
  // 物流线
  async function getInverterInfo() {
    let list = $('#cleaning .bpq-warning')
    for (let index = 0; index < list.length; index++) {
      const element = list[index];
      element.style.display = 'none'
    }
    const data = await new Promise((resolve, reject) => {
      //字符串转json
      resStr =
        '{"InverterInfo":[{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"inverterSn":2,"inverterStatus":2}],"updateTime":1742809831257,"RgvInfo":[{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"logisticsLineSn":1,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"logisticsLineSn":2,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"logisticsLineSn":3,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"logisticsLineSn":4,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"logisticsLineSn":5,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"logisticsLineSn":6,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"logisticsLineSn":7,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"logisticsLineSn":8,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"logisticsLineSn":9,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":1,"logisticsLineSn":10,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"logisticsLineSn":1,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"logisticsLineSn":2,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"logisticsLineSn":3,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"logisticsLineSn":4,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"logisticsLineSn":5,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"logisticsLineSn":6,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"logisticsLineSn":7,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"logisticsLineSn":8,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"logisticsLineSn":9,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":2,"logisticsLineSn":10,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"logisticsLineSn":1,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"logisticsLineSn":2,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"logisticsLineSn":3,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"logisticsLineSn":4,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"logisticsLineSn":5,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"logisticsLineSn":6,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"logisticsLineSn":7,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"logisticsLineSn":8,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"logisticsLineSn":9,"logisticsLineStatus":2},{"createBy":"OPCUA","createTime":"2025-03-24 17:50:31","updateBy":null,"updateTime":null,"remark":null,"id":null,"belonging":3,"logisticsLineSn":10,"logisticsLineStatus":2}]}'
      res = JSON.parse(resStr);
      var updateTime = formatDateTime(res.updateTime);
      let str = '';
      // 遍历 RgvInfo 数组 物流线
      (res.RgvInfo || []).filter(item => item.belonging === 1).forEach(function (rgv, index) {
        str += `<div class="common-item">
                      <div class="title">物流线-${rgv.logisticsLineSn}</div>
                      <div class="status ${rgv.logisticsLineStatus === 0 ? 'yellow' : rgv.logisticsLineStatus === 2 ? 'green' : rgv.logisticsLineStatus === 1 ? 'red' : 'blue'
          }">${rgv.logisticsLineStatus === 0 ? '有料' : rgv.logisticsLineStatus === 1 ? '无料' : rgv.logisticsLineStatus === 2 ? '转运' : '定位'
          }</div>
            </div>`;
      });
      $('#cleaning #materialFlows').html(str);
      let str1 = '';
      // 遍历 InverterInfo 数组 变频器
      (res.InverterInfo || []).filter(item => item.belonging === 1).forEach(function (inverter, index) {
        str1 += `<div class="common-item">
                      <div class="title">变频器-${inverter.inverterSn}</div>
                      <div class="status ${inverter.inverterStatus === 0 ? 'yellow' : inverter.inverterStatus === 1 ? 'green' : inverter.inverterStatus === 2 ? 'red' : 'blue'
          }">${inverter.inverterStatus === 0 ? '停止' : inverter.inverterStatus === 1 ? '运行' : inverter.inverterStatus === 2 ? '报警' : '定位'
          }</div>
            </div>`;
        if (inverter.inverterStatus === 2) {
          $(`#cleaning .bpq-${inverter.inverterSn}`).css('display', 'block')
        }
      });
      $('#cleaning #transducer').html(str1);
      resolve(res)
    })
    return data
  }
  // 初始请求一次
  getInitAllData()
  // 每15秒轮询一次
  // setInterval(getInitAllData, refleshAlarm);
  function getInitAllData() {
    // 清空数据
    $('#cleaning span').text('')
    $('#cleaning .warning-box').css('display', 'none');
    $('#cleaning #tip-wrapper-list-content').html('')
    $('#cleaning .progress-ring').css('--progress', 0)
    let warningMarks = $('#cleaning .warning-mark')
    for (let index = 0; index < warningMarks.length; index++) {
      const element = warningMarks[index];
      element.style['animation-delay'] = `${Math.random() * 5}s`
    }
    Promise.all([getCleaningStatusInfo(), getLoadingAlarmInfo(), getInverterInfo(), getTransportAlarmsInfo()]).then(([
      cleaningStatusInfo, loadingAlarmInfo, inverterInfo, transportAlarmsInfo
    ]) => {
      console.log(cleaningStatusInfo, loadingAlarmInfo, inverterInfo, transportAlarmsInfo, 'all');
      $('#cleaning .pm-warning').css('display', 'none');
      $('#cleaning .fddm-warning').css('display', 'none');
      let str = '';
      let {
        cleaningStatus: {
          inkjetMarkingStatus,
          wetDustCollectorStatus,
          laserStatus,
          laserCoolerTemperature,
          laserSmokeExtractorStatus,
          boardVisionRecognitionStatus,
          boardVisionCorrection
        }
      } = cleaningStatusInfo
      let jgqglyc = (loadingAlarmInfo.loadingAlarms || []).find(item => item.alarmType === 0)
      let jgqwdyc = (loadingAlarmInfo.loadingAlarms || []).find(item => item.alarmType === 1)
      let jgqxcqyc = (loadingAlarmInfo.loadingAlarms || []).find(item => item.alarmType === 2)
      if (inkjetMarkingStatus === 1 || laserStatus === 1 || laserCoolerTemperature === 1 ||
        laserSmokeExtractorStatus === 1 || boardVisionRecognitionStatus === 1 || boardVisionCorrection === 1 ||
        jgqglyc || jgqwdyc || jgqxcqyc) {
        str += `<div class="tip-wrapper-list-item alarm1">
								<div style="display: flex; align-items: center" class="alarms">
									<div  class="alarms">喷墨划线异常报警</div>
								</div>
								<div style="font-size: 14px"  class="alarms">${formatDateTime(cleaningStatusInfo.updateTime)}</div>
							</div>`
        $('#cleaning .pm-warning').css('display', 'block');
      }
      if (jgqglyc) {
        str += `<div class="tip-wrapper-list-item alarm1">
								<div style="display: flex; align-items: center" class="alarms">
									<div  class="alarms">激光器功率异常报警</div>
								</div>
								<div style="font-size: 14px"  class="alarms">${formatDateTime(loadingAlarmInfo.updateTime)}</div>
							</div>`
      }
      if (jgqwdyc) {
        str += `<div class="tip-wrapper-list-item alarm1">
								<div style="display: flex; align-items: center" class="alarms">
									<div  class="alarms">激光水冷器温度异常报警</div>
								</div>
								<div style="font-size: 14px"  class="alarms">${formatDateTime(loadingAlarmInfo.updateTime)}</div>
							</div>`
      }
      if (jgqxcqyc) {
        str += `<div class="tip-wrapper-list-item alarm1">
								<div style="display: flex; align-items: center" class="alarms">
									<div  class="alarms">激光水冷器温度异常报警</div>
								</div>
								<div style="font-size: 14px"  class="alarms">${formatDateTime(loadingAlarmInfo.updateTime)}</div>
							</div>`
      }

      if (inkjetMarkingStatus === 1 || jgqglyc || jgqwdyc || jgqxcqyc) str += `<div class="space"></div>`
      let dmqkcyc = (loadingAlarmInfo.loadingAlarms || []).find(item => item.alarmType === 3)
      if (wetDustCollectorStatus === 1 || dmqkcyc) {
        str += `<div class="tip-wrapper-list-item alarm2">
								<div style="display: flex; align-items: center" class="alarms">
									<div  class="alarms">浮动打磨异常报警</div>
								</div>
								<div style="font-size: 14px"  class="alarms">${formatDateTime(cleaningStatusInfo.updateTime)}</div>
							</div>`
        $('#cleaning .fddm-warning').css('display', 'block');
      }
      if (dmqkcyc) {
        str += `<div class="tip-wrapper-list-item alarm2">
								<div style="display: flex; align-items: center" class="alarms">
									<div  class="alarms">打磨片库存低报警</div>
								</div>
								<div style="font-size: 14px"  class="alarms">${formatDateTime(loadingAlarmInfo.updateTime)}</div>
							</div>`
      }
      if (wetDustCollectorStatus === 1) {
        str += `<div class="tip-wrapper-list-item alarm2">
								<div style="display: flex; align-items: center" class="alarms">
									<div  class="alarms">湿式除尘器报警</div>
								</div>
								<div style="font-size: 14px"  class="alarms">${formatDateTime(cleaningStatusInfo.updateTime)}</div>
							</div>`
      }
      if (wetDustCollectorStatus === 1 || dmqkcyc) str += `<div class="space"></div>`
      let list = $('#cleaning .sfdj-warning')
      for (let index = 0; index < list.length; index++) {
        const element = list[index];
        element.style.display = 'none'
      }
      // 遍历 transportAlarms 数组
      (transportAlarmsInfo.transportAlarms || []).filter(item => item.component === 10).forEach(function (alarm,
        index) {
        str += `<div class="tip-wrapper-list-item alarm3">
								<div style="display: flex; align-items: center" class="alarms">
									<div  class="alarms">${alarm.alarmType === 0 ? '变频器' : alarm.alarmType === 1 ? '伺服电机' : ''}-编号${alarm.deviceSn} 异常报警</div>
								</div>
								<div style="font-size: 14px"  class="alarms">${formatDateTime(transportAlarmsInfo.updateTime)}</div>
							</div>`
        if (alarm.alarmType === 0) $(`.bpq-${alarm.deviceSn}`).css('display', 'block');
        if (alarm.alarmType === 1) $(`.sfdj-${alarm.deviceSn}`).css('display', 'block');
      });
      $('#cleaning #tip-wrapper-list-content').html(str)
    }).catch(err => {
      console.log(err);
    })
  }

  function updateProgress(ele, percent, needText) {
    $(`${ele}`)
      .attr('aria-valuenow', percent)
      .css('width', percent + '%')
    if (needText) $(`${ele}`).text(percent + '%');
  }

  function formatDateTime(updateTime) {
    var date = new Date(updateTime);
    var formatted =
      // date.getFullYear() +
      // '-' +
      // String(date.getMonth() + 1).padStart(2, '0') +
      // '-' +
      // String(date.getDate()).padStart(2, '0') +
      // ' ' +
      String(date.getHours()).padStart(2, '0') +
      ':' +
      String(date.getMinutes()).padStart(2, '0') +
      ':' +
      String(date.getSeconds()).padStart(2, '0');

    return formatted;
  }
</script>
<style lang="less">
  #cleaning {
    display: flex;
    flex-direction: column;
    height: 100%;


    .common-item {
      display: flex;

      .title {
        font-size: 20px;
        color: #ffffff;
        white-space: nowrap;
      }

      .status {
        font-weight: 600;
        font-size: 24px;
        color: #69d9fe;
        text-align: center;
        white-space: nowrap;
      }
    }

    .title-con {
      font-weight: 500;
      font-size: 28px;
      color: #ffffff;
      line-height: 50px;
      background: url(img/loading/title-icon-bg.png);
      background-size: 100% 100%;
      height: 59px;
      margin-top: 20px;

      div {
        display: inline;
      }
    }

    .bar-item {
      justify-content: space-between;
      align-items: center;
      /* margin-bottom: 48px; */
      font-weight: bold;
      font-size: 24px;

      .left {
        display: flex;
        align-items: center;
        flex-direction: row !important;
      }

      .left-bar {
        width: 16px;
        height: 17px;
        border-radius: 2px;
        margin-right: 10px;
      }

      display: flex;

      .title {
        font-size: 20px;
        color: #ffffff;
      }

      .status {
        font-weight: 600;
        font-size: 24px;
        color: #69d9fe;
        text-align: center;
      }
    }

    .content-container {
      flex: 1;
      position: relative;
      display: flex;
      flex-direction: column;
      background: linear-gradient(90deg,
          rgba(52, 203, 237, 0.1) 0%,
          rgba(102, 230, 255, 0.25) 54%,
          rgba(52, 192, 237, 0.1) 100%);
      border: 1px solid rgba(102, 230, 255, 0.25);
      transition: opacity 0.25s ease;

      .line {
        width: 100%;
        height: 11px;
        background: linear-gradient(90deg,
            #0a3c4c 0%,
            rgba(10, 58, 73, 0) 50%,
            #093746 100%);
      }

      .bar {
        width: 5px;
        position: absolute;
        background: #62fff6;
        height: 11px;
      }

      .left-top-bar {
        top: 0;
        left: 0;
      }

      .right-top-bar {
        top: 0;
        right: 0;
      }

      .left-bottom-bar {
        bottom: 0;
        left: 0;
      }

      .right-bottom-bar {
        bottom: 0;
        right: 0;
      }
    }


    .main-con {
      flex: 1;
      background-image: url(img/loading/screen-bg.png);
      background-size: 100% 100%;
      padding: 10px;
      display: flex;
      flex-direction: column;
      padding-bottom: 20px;
      background-repeat: no-repeat;

      .top {
        width: 100%;
        height: 30%;
        min-height: 30%;
        position: relative;

        .monitor-wrapper {
          position: absolute;
          left: 20px;
          right: 20px;
          top: 0;
          width: calc(100% - 50px);
          bottom: 0;
          z-index: 3;

          .monitor-header {
            display: flex;
            height: 100%;
            width: 100%;
            position: relative;

            .load-icon {
              margin-left: 15px;
              margin-top: 17px;
              margin-right: 30px;
              width: 150px;
              height: calc(100% - 30px);
            }

            .bpq-warning {
              top: 22%;
              height: 50px;
              width: 113px !important;

              .warning-content {
                width: 100% !important;
              }

            }

            .sfdj-warning {
              top: 66%;
              height: 50px;
              width: 128px !important;

              .warning-content {
                width: 100% !important;
              }

            }

            .bpq-1 {
              left: 9%;
            }

            .bpq-2 {
              left: 14%;
            }

            .bpq-3 {
              left: 19%;
            }

            .bpq-4 {
              left: 25%;
            }

            .bpq-5 {
              left: 31%;
            }

            .bpq-6 {
              left: 36%;
            }

            .bpq-7 {
              left: 41%;
            }

            .bpq-8 {
              left: 47%;
            }

            .bpq-9 {
              left: 53%;
            }

            .bpq-10 {
              left: 59%;
            }

            .bpq-11 {
              left: 66%;
            }

            .bpq-12 {
              left: 73%;
            }

            .bpq-13 {
              left: 80%;
            }

            .bpq-14 {
              left: 86%;
            }

            .sfdj-1 {
              left: 9%;
            }

            .sfdj-2 {
              left: 22%;
            }

            .sfdj-3 {
              left: 34%;
            }

            .sfdj-4 {
              left: 49%;
            }

            .sfdj-5 {
              left: 65%;
            }

            .sfdj-6 {
              left: 81%;
            }

            .fddm-warning {
              left: -15px;
              top: 11%;
              position: absolute;

              .fddm-left {
                position: absolute;
                left: 196px;
                top: 30%;

                &::before {
                  content: '';
                  position: absolute;
                  background: #143C8E;
                  border: 1.5px solid rgba(255, 255, 255, 0.95);
                  border-radius: 50%;
                  left: 0;
                  top: 89px;
                  width: 8px;
                  height: 8px;
                }

                &::after {
                  content: '';
                  width: 61px;
                  border: 1px solid #FFFFFF;
                  left: -2px;
                  height: 1px;
                  display: block;
                  top: 117px;
                  position: absolute;
                  transform: rotate(45deg);

                }
              }

              .fddm-right {
                position: absolute;
                left: 194px;
                top: 116px;

                &::before {
                  content: '';
                  width: 90px;
                  border: 1px solid #FFFFFF;
                  left: 52px;
                  height: 1px;
                  display: block;
                  top: 22px;
                  position: absolute;

                }
              }

              .warning-content {
                left: 150px;
                top: 22px;
                position: absolute;
              }

              .warning-mark {
                left: 180px;
                top: 100px;
                position: absolute;
              }

            }

            .wl-warning {
              left: 50%;
              top: 36%;
              transform: translateY(-50%);
            }

            .pm-warning {
              left: 56px;
              bottom: 0;
            }

            .warning-box {
              position: absolute;

              .warning-content {
                width: 157px;
                height: 72px;
                background: url(img/loading/alert-bg-1.png);
                background-size: 100% 100%;
                padding-top: 10px;

                .warning-title {
                  font-weight: 600;
                  font-size: 18px;
                  color: rgba(255, 133, 89, 1);
                  text-align: center;
                }

                .warning-text {
                  font-weight: 500;
                  font-size: 16px;
                  text-align: center;
                  color: #FFFFFF;
                }
              }

              .warning-mark {
                width: 30px;
                height: 30px;
                margin-top: 5px;
                background-size: 100% 100%;
                margin-left: 10px;
                animation: blink 1.5s linear infinite;

                img {
                  width: 100%;
                  height: 100%;
                }

              }

              /* display: none; */
            }

            .structure-con {
              position: relative;
            }

            .structure {
              flex-grow: 1;
              width: 100%;
              height: 100%;
            }

            .tip {
              width: 82px;
              height: 80px;
              margin-top: 12px;
            }
          }

          .monitor-status {
            display: flex;
            margin: 10px 12px;

            &-item {
              width: 32%;
              position: relative;

              &-title {
                font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
                font-weight: 500;
                font-size: 14px;
                color: #ffffff;
                text-align: left;
                font-style: normal;
                position: absolute;
                left: 52px;
                top: 2px;
              }

              .timer {
                position: absolute;
                right: 10px;
                bottom: 0px;
                font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
                font-weight: 400;
                font-size: 8px;
                color: #ffffff;
                line-height: 22px;
                text-align: left;
                font-style: normal;
              }
            }

            .status-title-img {
              width: 100%;
              height: 30px;
            }
          }

          .monitor-count {
            display: flex;
            margin: 0 12px;

            &-item {
              width: 313px;
              margin-right: 10px;
              position: relative;

              .count-img {
                width: 100%;
                height: 45px;
              }

              &-title {
                font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
                font-weight: 500;
                font-size: 13px;
                color: #ffffff;
                line-height: 45px;
                text-align: left;
                font-style: normal;
                display: flex;
                justify-content: space-between;
                position: absolute;
                left: 0;
                right: 0;
                padding: 0 13px;
                top: 0;

                .num {
                  font-family: DINAlternate, DINAlternate;
                  font-weight: bold;
                  font-size: 18px;
                  color: #69d9fe;
                  text-align: center;
                  font-style: normal;
                  text-transform: none;
                }
              }
            }
          }
        }
      }

      .bottom {
        flex: 1;
        display: flex;
        margin-bottom: 10px;
        height: calc(70% - 170px);

        >.left,
        >.right {
          flex: 1;
          display: flex;
          flex-direction: column;
          max-width: 50%;

          .title-con {
            width: 646px;
            margin-bottom: 10px;
          }

          .content {
            flex: 1;
            display: flex;
            flex-direction: column;
          }

          .content-container {
            margin-left: 40px;
          }
        }

        .left {
          .title-con div {
            padding-left: 100px;
          }

          .status {
            display: flex;
            justify-content: space-around;

            .common-item {
              display: flex;
              flex-direction: column;
              justify-content: center;
            }
          }
        }

        >.right {
          max-width: calc(50% - 20px);

          .title-con {
            margin-left: 30px;

            div {
              padding-left: 55px;
            }
          }

          .content-container {
            height: 271px;
            max-height: 40%;
          }

          .running-status {
            min-height: 227px;

            .flex {
              display: flex;
              padding: 0 20px 0 50px;
              flex-wrap: wrap;

              .common-item {
                width: 10%;
                margin-bottom: 20px;
                flex-direction: column;

                .title {
                  font-size: 14px;
                  background: linear-gradient(270deg,
                      rgba(55, 108, 186, 0.1) 0%,
                      rgba(198, 245, 255, 0.16) 100%);
                  border-radius: 6px 6px 6px 15px;
                  padding: 3px 20px 3px 10px;
                }

                .status {
                  font-size: 18px;
                  text-align: left;

                  &.yellow {
                    color: #FFEDA8;
                  }

                  &.green {
                    color: #39E9A1;
                  }

                  &.red {
                    color: #FF4836;
                  }

                  &.blue {
                    color: #64CEFF;
                  }
                }
              }
            }
          }

          .content {
            justify-content: space-between;
            padding: 10px;
            display: flex;

            .content {
              display: flex;

              flex-direction: row;

              .left {
                min-width: 30%;

                .run-status {
                  width: 100%;
                  height: 50%;
                  position: relative;
                  /* background: url(img/loading/running-bg.png); */
                  background-size: 100%;
                  background-repeat: no-repeat;

                  >img {
                    position: absolute;
                    height: 100%;
                    left: 50%;
                    transform: translateX(-50%);
                  }

                  .inner {
                    width: 100%;
                    position: absolute;
                    height: 100%;
                    /* background: url(img/loading/normal-bg.png); */
                    background-size: 100%;
                    background-repeat: no-repeat;
                    margin: auto;
                    font-size: 20px;
                    color: #ffffff;
                    font-weight: 500;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    >img {
                      position: absolute;
                      height: 100%;
                      left: 50%;
                      transform: translateX(-50%);
                    }

                    span {
                      position: absolute;
                    }
                  }
                }

                .work-status {
                  font-size: 20px;
                  color: #ffffff;
                  margin: 10px 0;
                }

                .common-item {
                  width: 100%;
                  align-items: center;
                  justify-content: space-between;

                  .title {
                    font-size: 16px;
                  }

                  .status {
                    font-size: 21px;
                  }
                }
              }

              .center {
                width: 34%;
                min-width: 34%;
                padding: 10px 30px;
                display: flex;
                flex-direction: column;

                .position {
                  flex: 1;
                  justify-content: space-around;
                  display: flex;
                  flex-direction: column;

                  .common-item {
                    margin-top: 10px;
                    height: 45px;
                    background: url(img/loading/text-bg.png) no-repeat;
                    background-size: 100% 100%;
                    justify-content: space-between;
                    align-items: center;
                    padding: 0 40px;

                    .title,
                    .status {
                      font-size: 20px;
                      font-weight: 600;
                    }

                    .status {
                      font-size: 24px;
                    }

                    &:first-of-type {

                      .title,
                      .status {
                        color: #f16060;
                      }
                    }

                    &:nth-of-type(2) {

                      .title,
                      .status {
                        color: #f2a90e;
                      }
                    }

                    &:last-of-type {

                      .title,
                      .status {
                        color: #13e7ff;
                      }
                    }
                  }
                }
              }

              .right {
                flex: 1;
                min-width: 30%;
                display: flex;
                flex-direction: column;

                .rotate-speed {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: url(img/loading/rotate-speed.png);
                  background-size: 100%;
                  width: 95px;
                  height: 98px;
                  margin: 10px auto;
                  font-size: 28px;
                  color: #ffffff;
                }

                .common-item {
                  justify-content: space-between;
                }
              }
            }
          }
        }

        .middle-content {
          display: flex;
          padding: 30px 30px;

          .left-item {
            width: 30%;
            display: flex;
            align-items: center;
            flex-direction: column;

            .count-circle {
              position: relative;

              img {
                width: 100%;
                position: absolute;
                z-index: 1;
              }

              background-size: 100%;
              width: 110px;
              height: 110px;
              display: flex;
              align-items: center;
              justify-content: center;

              .progress-ring {
                --size: 78px;
                /* 圆环尺寸 */
                --border: 5px;
                /* 圆环粗细 */
                --color: transparent;
                /* 进度颜色 */
                --bg: #42b983;
                /* 背景颜色 */

                width: var(--size);
                height: var(--size);
                border-radius: 50%;
                background: conic-gradient(var(--color) calc((calc(100 - var(--progress)) * 3.6deg)),
                    var(--bg) 0);
                position: relative;
              }

              .progress-ring__content {
                position: absolute;
                width: calc(100% - 2 * var(--border));
                height: calc(100% - 2 * var(--border));
                background: #274875;
                border-radius: 50%;
                top: var(--border);
                left: var(--border);
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: Arial;
                color: #44e1ff;
                font-size: 24px;
              }
            }
          }

          .right-item {
            flex: 1;

            .common-item {
              align-items: center;
              justify-content: space-between;
              margin-bottom: 20px;

              .status {
                font-size: 20px;
              }
            }
          }
        }

        .bottom-content {
          display: flex;
          max-height: calc(100% - 200px);
          flex: 1;

          .left-content {
            width: 60%;
            padding-left: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding-bottom: 40px;
          }

          .right-content {
            padding-left: 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding-bottom: 20px;

            .common-item {
              flex-direction: column;
              align-items: flex-start;

              .status {
                color: #ffeda8;
              }
            }
          }
        }
      }
    }

    .tip-wrapper {
      cursor: pointer;
      position: relative;
    }

    .tip-wrapper-list {
      position: absolute;
      right: 0;
      top: 0;
      /* width: 364px; */
      background: #ffffff;
      border-radius: 4px;
      z-index: 100;
      padding: 18px;
      display: none;
    }

    #tip-wrapper-list-content {
      max-height: calc(100vh - 400px);
      overflow-y: auto;
    }

    .tip-wrapper-list-item {
      width: 364px;
      height: 31px;
      line-height: 31px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 5px;
      font-weight: 400;
      font-size: 16px;
      color: #00173a;
      text-align: left;
      font-style: normal;
      margin-bottom: 10px;
      position: relative;
      padding-left: 26px;

      &::before {
        position: absolute;
        content: '';
        width: 10px;
        height: 10px;
        border-radius: 50%;
        left: 8px;
      }


      &.alarm1 {
        background: #fdf7f3;

        &::before {
          background: #FF6310;
        }
      }

      &.alarm2 {
        background: #fdf4f4;

        &::before {
          background: #e6736f;
        }
      }

      &.alarm3 {
        background: #fcfaf3;

        &::before {
          background: #CCAE27;
        }
      }
    }

    .space {
      width: 100%;
      height: 10px;
    }


  }

  @keyframes blink {

    0% {
      opacity: 0.3;
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: 0.3;
    }
  }

  @media screen and (max-width: 1600px) {
    #cleaning {
      .main-con .bottom .middle-content {
        padding: 0 30px;
        max-height: calc(100% - 240px);
      }

      .bar-item {
        font-size: 20px;
      }

      .title-con {
        font-size: 22px;
      }

      .common-item {
        .title {
          font-size: 16px;
        }

        .status {
          font-size: 20px;
        }
      }

      .bottom {
        max-height: calc(70% - 170px);
        min-height: 70%;

        .center .position {
          .common-item {
            padding: 0 20px !important;
          }

          .title {
            font-size: 14px !important;
          }

          .status {
            font-size: 18px !important;
          }
        }

        .left-content,
        .right-content {
          padding-bottom: 0 !important;
        }

        >.right {
          .content {
            >.left {
              .common-item {
                .title {
                  font-size: 13px !important;
                }

                .status {
                  font-size: 16px !important;
                }
              }
            }

            >.right {
              .common-item {
                .title {
                  font-size: 14px !important;
                }

                .status {
                  font-size: 18px !important;
                }
              }
            }

            .work-status {
              font-size: 16px !important;
            }

            >.center {
              padding: 10px !important;
            }
          }
        }

        >.left {
          & .common-item {
            .title {
              font-size: 13px !important;
            }

            .status {
              font-size: 16px !important;
            }
          }
        }
      }
    }
  }
</style>
<style>
  body,
  html {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
</style>